<template>
  <div class="jaguar-view">
    <div class="jaguar-search">
      <el-form :inline="true" :model="searchForm" @submit.prevent>
        <search-input
          label="客户端ID"
          v-model="searchForm.fuzzyClientId"
          :search="getData"
        />
        <el-form-item>
          <search-button :search="getData" />
          <reset-button :search-form="searchForm" :search="getData" />
        </el-form-item>
      </el-form>

      <div class="jaguar-control">
        <add-button @click="handleCreate" />
      </div>
    </div>

    <el-card class="jaguar-table">
      <el-table :data="tableData" v-loading="loading" table-layout="auto">
        <el-table-column prop="clientId" label="应用ID" />
        <el-table-column prop="clientName" label="应用名称" />
        <el-table-column prop="authorizationGrantTypes" label="授权类型" />
        <el-table-column prop="clientAuthenticationMethods" label="认证方式" />

        <el-table-column label="是否启用">
          <template #default="scope">
            <el-switch v-model="scope.row.enable" disabled />
          </template>
        </el-table-column>

        <el-table-column label="操作">
          <template #default="scope">
            <view-button @click="handleView(scope.row)" />
            <edit-button @click="handleEdit(scope.row)" />
            <edit-button
              label="重置密钥"
              @click="handleResetSecret(scope.row)"
            />
            <delete-button
              @confirm="
                ({ instance, done }) =>
                  handleDelete(scope.row, { instance, done })
              "
            />
          </template>
        </el-table-column>
      </el-table>

      <table-page :page="page" :search="getData" />
    </el-card>

    <Edit :dialog="dialog" @success="getData()" />
  </div>
</template>
<script>
import { fetchList, resetSecret, del } from '@/api/upms/oauth2Client'
import Edit from './Edit'

export default {
  name: 'Oauth2Client',
  data() {
    return {
      loading: false,
      tableData: [],
      searchForm: {},
      page: {
        total: 0,
        current: 1,
        size: 10,
      },
      dialog: {
        entity: null,
        operation: null,
        visible: false,
      },
    }
  },
  components: {
    Edit,
  },
  mounted() {
    this.getData()
  },
  methods: {
    getData(current, size) {
      if (current) this.page.current = current
      if (size) this.page.size = size

      this.loading = true
      fetchList(
        Object.assign(
          {
            ascs: ['client_type', 'client_id'],
            current: this.page.current,
            size: this.page.size,
          },
          this.searchForm
        )
      )
        .then((res) => {
          let tableData = res.data.data.records
          for (let i in tableData) {
            let row = tableData[i]
            if (row.authorities && row.authorities.length > 0) {
              let authorities = []
              for (let j in row.authorities) {
                authorities.push(row.authorities[j].authority)
              }
              row.authorities = authorities
            }
          }

          this.tableData = tableData
          this.page.total = res.data.data.total
        })
        .finally(() => {
          this.loading = false
        })
    },
    handleCreate() {
      this.dialog.entity = null
      this.dialog.operation = 1
      this.dialog.visible = true
    },
    handleEdit(row) {
      this.dialog.entity = row
      this.dialog.operation = 2
      this.dialog.visible = true
    },
    handleResetSecret(row) {
      this.$confirm('是否确认重置' + row.clientId + '密钥', '提示', {
        type: 'warning',
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        closeOnClickModal: false,
        beforeClose: async (action, instance, done) => {
          if (action == 'confirm') {
            instance.confirmButtonLoading = true

            let res = await resetSecret(row.id)
            this.$alert(
              '操作成功，请牢记密钥，丢失无法找回：' + res.data.data,
              'Title',
              {
                confirmButtonText: '记住了',
              }
            )
          }
          done()
        },
      }).catch(console.debug)
    },
    handleView(row) {
      this.dialog.entity = row
      this.dialog.operation = 3
      this.dialog.visible = true
    },
    handleDelete(row, { instance, done }) {
      del(row.id)
        .then(() => {
          done()
          this.$message.success('删除成功')
          this.getData()
        })
        .finally(() => {
          instance.confirmButtonLoading = false
        })
    },
  },
}
</script>
